@import "@/app/styles";

.MoreActions {
  position: sticky;
  right: 0;
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid rgba(224, 224, 224, 1);
  background: linear-gradient(270deg, rgb(255, 255, 255) 69.02%, rgba(255, 255, 255, 0) 100%);
  padding: 20px 0 0;
  transition: all $transition;

  &-Icon {
    flex: none;
    cursor: pointer;
    background: linear-gradient(270deg, rgb(255, 255, 255) 69.02%, rgba(255, 255, 255, 0) 100%);
  }

  &-DropDownList {
    background-color: $color-white;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: $shadow-perimeter;
    max-width: 200px;
    width: 100%;
    color: $color-text;
  }

  &-DropDownListItem {
    display: flex;
    align-items: center;
    padding: 4px;
    cursor: pointer;
    border-bottom: 1px solid $color-light-gray;
    transition: all $transition;

    &-Inner {
      display: flex;
      align-items: center;
    }

    &:last-child {
      border-bottom: none;
    }

    &-Icon {
      display: inline-block;
      height: 24px;
      width: 24px;
      margin-right: 8px;

      svg {
        transition: all $transition;
      }
    }

    &__active {
      background-color: $color-primary;
      color: $color-white;
      fill: $color-white;

      &:hover {
        background-color: $color-primary;
      }
    }

    &:hover {
      background-color: $color-primary-hover;
    }
  }
}

.theme-dark {
  .MoreActions {
    background: linear-gradient(270deg, rgb(24, 24, 31) 69.02%, rgba(249, 249, 252, 0) 100%);

    &-Icon {
      background: linear-gradient(270deg, rgb(24, 24, 31) 69.02%, rgba(249, 249, 252, 0) 100%);
    }

    &-DropDownList {
      background-color: $color-darkness;
      box-shadow: $shadow-perimeter-light;
    }
  }
}
